<script>
    if (localStorage.getItem('token') === null) {
        location.href = './login.html'
    }
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <title>大事件</title>
</head>

<body>
    <!-- 头顶导航栏 -->
    <header class="header">
        <!-- logo图标 -->
        <div class="logo">
            <img src="./assets/images/logo.png" alt="">
        </div>
        <!-- 选项 -->
        <ul class="option">
            <li class="usernamef">
                <a href="javascript:;" class="usernamer">
                    <span class="user-text">L</span>
                    <span class="img"><img src="./assets/images/sample2.jpg" alt="" class="user-pic"></span>
                    个人中心
                    <span class="glyphicon glyphicon-triangle-bottom lower"></span>
                    <span class="glyphicon glyphicon-triangle-top upper"></span>
                </a>
                <span class="xian1"></span>
                <dl class="optioner">
                    <dd><a href="#messages1" aria-controls="messages1" role="tab" data-toggle="tab"
                            class="options">基本资料</a></dd>
                    <dd><a href="#messages2" aria-controls="messages2" role="tab" data-toggle="tab"
                            class="options">重置密码</a></dd>
                    <dd><a href="#messages3" aria-controls="messages3" role="tab" data-toggle="tab"
                            class="options">更换头像</a></dd>
                </dl>
            </li>
            <li class="exit">
                <a href="javascript:;" class="quit">
                    <span class="glyphicon glyphicon-off"></span>
                    退出
                </a>
                <span class="xian2"></span>
            </li>
        </ul>

    </header>

    <!-- 左侧导航栏 -->
    <nav class="navs">
        <div class="nav-hd">
            <span class="user-text">L</span>
            <span class="img"><img src="./assets/images/sample.jpg" alt="" class="user-pic"></span>
            欢迎你，<span class="username">lxd</span>
        </div>
        <div class="nav-bd">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                        <span class="glyphicon glyphicon-home"></span>
                        首页</a>
                </li>
                <li role="presentation">
                    <a href="#profile1" aria-controls="profile1" role="tab" data-toggle="tab" class="profile1">
                        <span class="glyphicon glyphicon-align-left"></span>
                        类别管理</a>
                </li>
                <li role="presentation">
                    <a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab" class="profile2">
                        <span class="glyphicon glyphicon-align-left"></span>
                        文章列表</a>
                </li>
                <li role="presentation">
                    <a href="#profile3" aria-controls="profile3" role="tab" data-toggle="tab" class="profile3">
                        <span class="glyphicon glyphicon-align-left"></span>
                        添加文章</a>
                </li>
                <li role="presentation">
                    <a href="#messages1" aria-controls="messages1" role="tab" data-toggle="tab">
                        <span class="glyphicon glyphicon-align-left"></span>
                        基本资料</a>
                </li>
                <li role="presentation">
                    <a href="#messages2" aria-controls="messages2" role="tab" data-toggle="tab">
                        <span class="glyphicon glyphicon-align-left"></span>
                        重置密码</a>
                </li>
                <li role="presentation">
                    <a href="#messages3" aria-controls="messages3" role="tab" data-toggle="tab">
                        <span class="glyphicon glyphicon-user"></span>
                        更换头像</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主体部分 -->
    <div class="main">
        <div class="tab-content">
            <!-- 首页 -->
            <div role="tabpanel" class="tab-pane active" id="home">
                <iframe src="./home/dashboard.html" frameborder="0"></iframe>
            </div>

            <!-- 类别管理 -->
            <div role="tabpanel" class="tab-pane " id="profile1">
                <div class="box-hd">
                    <p class="bg-primary">类别管理</p>
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="control-label" for="name">分类名称：</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入分类名称" name="name">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="alias">分类别名：</label>
                            <input type="text" class="form-control" id="alias" placeholder="请输入分类别名" name="alias">
                        </div>
                        <button type="reset" class="btn  btn-primary">重置</button>
                        <button type="button" class="btn  btn-primary" id="submit-text">保存</button>
                    </form>
                </div>
                <!-- 表格部分 -->
                <div class="box-bd">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th style="width: 40%;">分类名称</th>
                                <th style="width: 40%;">分类别名</th>
                                <th style="width: 20%;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- 弹出框 -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="exampleModalLabel">编辑类别</h4>
                            </div>
                            <div class="modal-body">
                                <form id="upload">
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">新分类名称:</label>
                                        <input type="text" class="form-control" id="old-name" name="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">新分类别名:</label>
                                        <input type="text" class="form-control" id="new-name" name="alias">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary uplist" data-dismiss="modal">确定修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文章管理 -->
            <div role="tabpanel" class="tab-pane " id="profile2">
                <div>
                    <p class="bg-primary">文章列表</p>
                    <form class="form-inline">
                        <div class="form-group">
                            <!-- <input type="text" class="form-control" id="" placeholder="请选择分类" name=""> -->
                            <select class="form-control option-asso" name="category">
                                <option value="">请选择分类</option>
                            </select>
                        </div>
                        --
                        <div class="form-group">
                            <!-- <input type="text" class="form-control" id="" placeholder="请选择状态" name=""> -->
                            <select class="form-control option-state" name="state">
                                <option value="">请选择状态</option>
                                <option value="草稿">草稿</option>
                                <option value="已发布">已发布</option>
                            </select>
                        </div>
                        <button type="submit" class="btn  btn-primary" id="select-text">筛选</button>
                    </form>
                </div>
                <!-- 表单 -->
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="width: 30%;">文章标题</th>
                            <th style="width: 10%;">分类</th>
                            <th style="width: 20%;">发表时间</th>
                            <th style="width: 20%;">状态</th>
                            <th style="width: 20%;">操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <!-- 分页框 -->
                <div id="page"></div>
            </div>

            <!-- 添加文章 -->
            <div role="tabpanel" class="tab-pane " id="profile3">
                <div class="box">
                    <p class="bg-primary">添加文章</p>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <!-- 文章标题 -->
        
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <!-- 选择分类 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择分类</label>
                            <div class="layui-input-block">
                                <select class="cate_id" name="cate_id">
                                    <!-- lay-verify="required" -->
                                    <option value="">请选择类别</option>
        
                                </select>
                            </div>
                        </div>
                        <!-- 文章内容 -->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">文本内容</label>
                            <div class="layui-input-block">
                                <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <!-- 文章封面 -->
                        <div class="layui-form-item">
                            <!-- 左侧的 label -->
                            <label class="layui-form-label">文章封面</label>
                            <!-- 选择封面区域 -->
                            <div class="layui-input-block cover-box">
                                <!-- 左侧裁剪区域 -->
                                <div class="cover-left">
                                    <img id="image" src="../assets/images/sample2.jpg" alt="" />
                                </div>
                                <!-- 右侧预览区域和选择封面区域 -->
                                <div class="cover-right">
                                    <!-- 预览的区域 -->
                                    <!-- 选择封面按钮 -->
                                    <input type="file" id="files" style="display: none;">
                                    <button type="button" id="cover" class="layui-btn layui-btn-danger">选择封面</button>
                                </div>
                            </div>
                        </div>
                        <!-- 文章状态 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="state" value="已发布" title="已发布">
                                <input type="radio" name="state" value="草稿" title="草稿" checked>
                            </div>
                        </div>
        
        
                        <!-- 按钮 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 基本资料 -->
            <div role="tabpanel" class="tab-pane " id="messages1">
                <div class="box">
                    <p class="bg-primary">修改用户信息</p>
                    <form class="form-inline">
                        <div class="form-group">
                            <label class=" control-label" for="usename">登录账号：</label>
                            <p class="form-control-static form-control">123</p>
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="nickname">用户昵称：</label>
                            <input type="text" class="form-control" id="nickname" placeholder="请输入昵称" name="nickname">
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="email">用户邮箱：</label>
                            <input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email">
                        </div>
                        <button type="button" class="btn  btn-primary" id="submit">确认修改</button>
                        <button type="reset" class="btn  btn-primary">重置</button>
                    </form>
                </div>
            </div>

            <!-- 重置密码 -->
            <div role="tabpanel" class="tab-pane " id="messages2">
                <div class="box">
                    <p class="bg-primary">修改用户密码</p>
                    <form class="form-inline">
                        <div class="form-group">
                            <label class=" control-label" for="oldPwd">原密码：</label>
                            <input type="password" class="form-control" id="oldPwd" placeholder="请输入原密码" name="oldPwd">
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="newPwd">新密码：</label>
                            <input type="password" class="form-control" id="newPwd" placeholder="请输入新密码" name="newPwd">
                        </div>
                        <div class="form-group">
                            <label class=" control-label" for="newPwds">确认新密码：</label>
                            <input type="password" class="form-control" id="newPwds" placeholder="请输入新密码">
                        </div>
                        <button type="button" class="btn  btn-primary" id="submit-pwd">确认修改</button>
                        <button type="reset" class="btn  btn-primary">重置</button>
                    </form>
                </div>
            </div>

            <!-- 更换头像 -->
            <div role="tabpanel" class="tab-pane " id="messages3">
                <div class="box">
                    <p class="bg-primary">修改头像</p>
                    <div class="row1">
                        <!-- 图片裁剪区域 -->
                        <div class="cropper-box">
                            <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
                            <img id="image" src="./assets/images/sample.jpg" alt="">
                        </div>
                    </div>
                    <div class="btns">
                        <input type="file" id="file" style="display: none;" accept=".png,.jpg,.gif">
                        <button type="button" class="btn btn-primary">选择头像</button>
                        <button type="submit" class="btn btn-primary btn-warning">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./assets/lib/jquery.js"></script>
    <script src="./assets/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/lib/tinymce/tinymce.min.js"></script>
    <script src="./assets/lib/tinymce/tinymce_setup.js"></script>
    <script src="./assets/lib/cropper/Cropper.js"></script>
    <script src="./assets/lib/cropper/jquery-cropper.js"></script>
    <script src="./assets/layui/layui.all.js"></script>
    <script src="./assets/js/common.js"></script>
    <script src="./assets/js/index.js"></script>
</body>

</html>